import React from "react";
import {connect} from "react-redux";
import {
  toggleTodo,
  addTodo,
  fetchTodoList,
  setVisibilityFilter,
} from "../../store/actions/todo";

import { parseSearch } from './../../utils/index';
import TodoCss from "./Todo.module.css";

class Todo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: ""
    }

    this.handleSubmit = this.handleSubmit.bind(this);
    this.changeFilter = this.changeFilter.bind(this);
    this.handleInit = this.handleInit.bind(this);
  }

  componentDidMount() {
    console.log(this.props)
    console.log(parseSearch(this.props.location.search));
    console.log(this.props.match.params);
    this.handleInit()
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    console.log(prevProps, prevState, snapshot)
  }

  handleChange = (e) => {
    this.setState({
      input: e.target.value
    })
  }

  handleSubmit(e) {
    if (e.keyCode === 13 && this.state.input !== "") {
      this.props.addTodo(this.state.input);
      this.setState({
        input: ""
      });
    }
  }

  changeFilter(event, filter) {
    event.preventDefault();
    this.props.setVisibilityFilter(filter)
  }

  handleInit() {
    this.props.initTodo([{text: 'a'}, {text: 'b'}, {text: 'c'}])
  }

  handleJump = () => {
    this.props.history.push('/home/todo/112?a=1&b=1', {
      hah: 1
    })
  }

  render() {
    return (
        <>
          <button onClick={this.handleJump}>handleJump</button>
          <button onClick={this.handleInit}>初始化</button>
          <input value={this.state.input} onChange={this.handleChange}
                 placeholder="请输入"
                 onKeyDown={this.handleSubmit}
          />
          <div className={TodoCss.statusList}>
            Show: {
            ['SHOW_ALL', 'SHOW_ACTIVE', 'SHOW_COMPLETED'].map(val => {
              if (this.props.visibilityFilter === val) {
                return <span className={TodoCss['todo-link']} key={val}>{val}</span>
              }

              return <a href={val} key={val} className={TodoCss['todo-link']}
                        onClick={(e) => this.changeFilter(e, val)}>{val}</a>
            })
          }
          </div>
          <ul>
            {this.props.todo.map((val, index) => {
              return (
                  <li
                      className={val.completed ? `${TodoCss.completed}` : ""}
                      key={index}
                      onClick={() => {
                        if (this.props.visibilityFilter === 'SHOW_ALL') {
                          this.props.todoClick(index)
                        }
                      }}
                  >
                    {val.text}
                  </li>
              );
            })}
          </ul>
        </>
    );
  }
}

function getVisibleTodo(todo = [], filter) {
  switch (filter) {
    case "SHOW_COMPLETED":
      return todo.filter((t) => t.completed);
    case "SHOW_ACTIVE":
      return todo.filter((t) => !t.completed);
    case "SHOW_ALL":
    default:
      return todo;
  }
}

export default connect(
    (state) => {
      return {
        todo: getVisibleTodo(state.todo.todo, state.todo.visibilityFilter),
        visibilityFilter: state.todo.visibilityFilter
      };
    },
    (dispatch) => {
      return {
        initTodo: (todo) => {
          return dispatch(fetchTodoList(todo))
        },
        todoClick: (id) => {
          dispatch(toggleTodo(id));
        },
        addTodo: (text) => {
          dispatch(addTodo(text));
        },
        setVisibilityFilter: (filter) => {
          dispatch(setVisibilityFilter(filter));
        }
      };
    }
)(Todo);
